<!--  -->
<template>
  <div class="article-file">
    <el-form-item label="添加文件">
      <el-button type="primary" size="midumn" @click.stop="chooseFile" :disabled="article.fileList && article.fileList.length > 0">点击上传文件</el-button>
      <span class="spn">仅支持txt,pdf,xla,xls,xlsx,xlt,xlw,zip,rar,doc,docx格式</span>
      <div v-if="article && article.fileList && article.fileList.length > 0" class="file-list">
        <div class="item" v-for="(item,index) in article.fileList" :key="index">
          <div class="file-image-icon">
            <img :src="require('@/assets/images/icon_suffix/'+item.suffix+'.png')" alt="file-icon" />
          </div>
          <div class="file-name black">
            {{item.originalFilename}}
          </div>
          <div class="opt">
            <el-button type="text" @click.stop="deleteFile(item)"><i class="el-icon-delete"></i></el-button>
          </div>
        </div>
      </div>
    </el-form-item>

    <!-- 选择资源文件 -->
    <ChooseRepertory ref="chooseRepertory" />
  </div>
</template>

<script>
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
export default {
  props: {
    system: {
      type: Object
    },
    article: {
      type: Object
    },
    resetFileList: {
      type: Function
    }
  },
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    // 选择下载资源文件
    chooseFile () {
      this.$refs['chooseRepertory'].show({ title: '选择文章系统资源文件', where: { type: [1] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          let FileList = JSON.parse(JSON.stringify(this.article.fileList))
          let chooseFiles = repertoryList.map(item => {
            return {
              id: item.id,
              originalFilename: item.originalFilename,
              suffix: item.suffix
            }
          })
          let all = FileList.concat(chooseFiles)
          this.resetFileList(all)
        }
      })
    },
    // 删除 file
    deleteFile (file) {
      this.$confirm('确认要删除 ' + file.originalFilename + ' 文件？', '提示', {
        type: 'warning'
      })
        .then(() => {
          let fileList = JSON.parse(JSON.stringify(this.article.fileList))
          let files = fileList.filter(item => {
            return item.id !== file.id
          })
          this.resetFileList(files)
        })
        .catch(() => {
        })
    }
  },
  components: {
    ChooseRepertory
  }
}
</script>

<style scoped lang="scss">
.spn{
  margin-left: 15px;
  color: #666;
  font-size: 12px;
}
.file-list {
  margin-top: 15px;
  .item {
    line-height: 1.3;
    display: flex;
    flex-flow: row;
    padding:10px 0;
    border-bottom:1px solid #e9e9e9;
    .file-image-icon {
      img {
        max-width: 40px;
        max-height: 40px;
      }
    }
    .file-name {
      margin-left: 10px;
      margin-top:8px;
      line-height: 2;
    }
    .opt {
      margin-left: 28px;
      .el-icon-delete{
        font-size: 18px;
        &:hover{
          color:#0480FB;
        }
      }
    }
  }
}
</style>
